import {Form, Button, Input, Row, Col, Cascader, DatePicker,InputNumber,Radio,} from 'antd';
import styles from './index.less';
import moment from 'moment';
const FormItem = Form.Item;

function query({form, onOk, }){

  const {getFieldDecorator,getFieldsValue,resetFields} = form;
  const { MonthPicker, RangePicker } = DatePicker;
  const formItemLayout = {
    // labelCol: { span: 7 },
    wrapperCol: { span: 16 },
    colon:false,
  };
  const submit = () => {
    const values = getFieldsValue();
    onOk(values);

  };

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }
  const reset = () => {
    resetFields();
  }
  return(
    <Form
      onSubmit={submit}
    >
      <Row>
        <Col span={6}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('cName',)(
                <Input size='large' placeholder='合同名称'/>
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('id',)(
                <Input size='large' placeholder='合同编号'/>
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('eName', )(
                <Input size='large' placeholder='客户中文名称'/>
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('custmId',)(
                <Input size='large' placeholder='客户编号'/>
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={6}>
          <FormItem
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 19 }}
            colon={false}
          >
            {
              getFieldDecorator('startTime', )(
                <RangePicker style={{width:'84.5%' }} format={'YYYY-MM-DD'} size='large'
                placeholder='合同起始日期'/>
              )
            }
          </FormItem>
        </Col>

        <Col span={6}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('fendTime', )(
                <DatePicker style={{width:'100%' }} format={'YYYY-MM-DD'} size='large' placeholder='合同终止日期>='/>
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('lendTime', )(
                <DatePicker style={{width:'100%' }} format={'YYYY-MM-DD'} size='large' placeholder='合同终止日期<='/>
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
        <FormItem
        {...formItemLayout}
        >
        {
          getFieldDecorator('statu', )(
            <Input size='large' placeholder='合同状态'/>
          )
        }
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={6}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('order', )(
                <Input size='large' placeholder='签单方'/>
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={24} style={{ textAlign: 'right'}}>
          <Button type='primary' icon='search' onClick={submit} style={{ marginRight: 20}}>查询</Button>
          <Button onClick={reset} style={{ marginRight: 20}}>清 除</Button>
        </Col>
      </Row>



    </Form>
  )
}

export default Form.create()(query);
